<!DOCTYPE html>
<html lang="en">
<head>
    <!--issue
    （solved）文本框输入后，没有实时更新，num数据，只能再次点击才能生效！！！

    新学：
    @blur 是当元素失去焦点时所触发的事件
    @focus 是元素获取焦点时所触发的事件
    @change 是元素中 "值发生改变" 且 "失焦" 时所触发的事件
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE组件版-计算器</title>
</head>
<body>
    <div id="app">
        <!-- 和组件的counterBox不一样，是因为特殊！ -->
        <counter-box></counter-box>
    </div>
    
    <script src="vue.js"></script>
    <script>
        // counterBox
        Vue.component('counterBox',{
            template:`
            <div>
                <resultDisplayCt :num="num"></resultDisplayCt>
                <operationCt @plusFoo="plusFoo" @subtractionFoo="subtractionFoo" @transmissionFoo="transmissionFoo"></operationCt>
            </div>
            `,
            data(){
                return {
                    num:0,
                }	
            },
            methods:{
                plusFoo(){
                    return this.num++;
                },
                subtractionFoo(){
                    return this.num--;
                },
                transmissionFoo(inputnum){
                    return this.num = inputnum;
                }
            }
        });

        // resultDisplayCt
        Vue.component('resultDisplayCt',{
            // 注意加引号
            // props:["num",],
            
            // 注意加s
            props:{
                // 源: num:[Number,String],
                // 优化写法：default，若父组件传值失败，至少有个值用
                num:{
                    type:[Number,String],
                }
            },
            template:`
                <h1>计数器:{{num}}</h1>
            `,
            data(){
                return {}	
            },
        });

        // operationCt
        Vue.component('operationCt',{
            //@blur 失焦处理事件！！！！！！！！！
            //@blur 是当元素失去焦点时所触发的事件
            //@focus 是元素获取焦点时所触发的事件 
            //@change 是元素中 "值发生改变" 且 "失焦" 时所触发的事件
             
            // template:`
            // <div>
            //     <button @click="$emit('plusFoo')"> +1</button>
            //     <button @click="$emit('subtractionFoo')"> -1</button>
            //     <input type="text" @blur="$emit('transmissionFoo',inputnum)" v-model="inputnum">
            // </div>
            // `,
            data(){
                return {
                    inputnum:0,
                }	
            },
            // @change的写法,结合计算属性，还能使得，输入后，文本框值变为零
            template:`
            <div>
                <button @click="$emit('plusFoo')"> +1</button>
                <button @click="$emit('subtractionFoo')"> -1</button>
                <input type="text" @change="transmissionFoo" ref="inputnum">
            </div>
            `,
            methods:{
                // 可以和父组件一样命名
                transmissionFoo(){
                    let newNum = this.$refs.inputnum.value;
                    this.$emit('transmissionFoo',newNum);
                    this.$refs.inputnum.value = "";
                },
            },
            
        });

        new Vue({
            el:"#app",
            data(){
                return {
                }
            },
        })
    
    </script>
    
</body>
</html>